<template>
<div >
  <div class="tabletitle">
    流水列表
  </div>
  <el-table
      ref="multipleTable"
      :data="arr"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      class="tablebox">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="订单编号"
        width="200">
      </el-table-column>
      <el-table-column
        prop="class"
        label="订单分类"
        width="160">
      </el-table-column>
      <el-table-column
        prop="name"
        label="标题"
        width="150">
      </el-table-column>
      <el-table-column
        prop="price"
        label="订单金额"
        width="150">
      </el-table-column>
      <el-table-column
        prop="state"
        label="订单状态"
        width="150">
        <template slot-scope="scope">{{stateObj[scope.row.state]}}</template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="下单时间"
        width="250">
      </el-table-column>
    </el-table>
</div>
  
</template>

<script>
import Bus from '../../../utils/bus'
import { batchDelete } from '../../../api/finance'
export default {
  props:['arr'],
    data() {
      return {
        stateObj:{  //映射对象
          0:'待支付',
          1:'已支付'
        },
        // tableData: [{
        //   id: '2019030102369669',
        //   class: '课程订单',
        //   name: '幼儿英语课程',
        //   price:2366,
        //   state:0,  //0待付款 1已付款
        //   date:'2016-05-03 00:00:00'
        // }],
        multipleSelection: []
      }
    },

    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      batchDeleteTable(){  //批量删除
        console.log('调用批量删除');
        let ids=''
        if(this.multipleSelection.length>0){    //判断选中的数组是否为空
          this.multipleSelection.forEach(item=>{   //将选中的数组遍历
            ids +=item.id+','                     //取数组中的id放入ids
          })
          ids = ids.slice(0,ids.length-1)     //去掉末尾逗号

        }
        batchDelete({ids:ids}).then(res=>{   //将拿到的ids往后台传
          console.log(res);
          if(res.code == 200){
             this.$emit('resetparentFun')
          }
        })
      }
    },
    mounted(){
      Bus.$on('batchdelete',this.batchDeleteTable) //绑定批量删除事件
    },
    beforeDestroy(){
      Bus.$off('batchdelete',this.batchDeleteTable) 
    }
}
</script>

<style lang="less" scoped>
.tabletitle{
  box-sizing: border-box;
  width: 1220px;
  height: 52px;
  background-color: white;
  margin: 0 auto;
  line-height: 52px;
  padding-left: 30px;
  font-size: 16px;
  font-weight:bolder;

}
.tablebox{
  width: 1220px !important;
  margin: 0 auto;
}
/deep/th{
    background-color: #eef2f6 !important;
    .cell{
      font-size: 16px !important;
      font-weight: bold;
      color: #333333;
      text-align:center;
      
    }
  }


</style>